<%--
  Created by IntelliJ IDEA.
  User: ravi
  Date: 7/18/12
  Time: 6:54 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/include/taglibs.jsp"%>
<%--@elvariable id="actionBean" type="com.depo.quiggle.view.controller.BillingReceivableAction"--%>
    <div id="wraper">

        <!--bodycontent start here-->
        <div class="bodycontent" >
            <div class="bodyContainer">
                <h1 class="heading">BILLING ACCOUNTS RECEIVABLE</h1>

                <div style="width:98%">
                    <div  style="float:left;overflow:hidden;width:100%;border:1px solid #ccc" class="boxGradient">
                        <div class="cornerWhite">Search By </div>
                        <div class="fluidColumns">
                            <ul>
                                <li><label>Category</label><br>
                                    <select name="select4" id="select4">
                                        <option>Receivable</option>
                                    </select>
                                </li>

                                <li><label>Search By</label><br>
                                    <select name="select4" id="select4">
                                        <option>Invoice #</option>
                                    </select>
                                    <input type="text" />
                                </li>

                                <li><label>Start Date</label><br>
                                    <input type="text" />
                                    <img src="${pageContext.request.contextPath}/images/billing/cal-icon.png" width="19" height="20" alt="Date Picker" /> </li>

                                <li><label>End Date</label><br>
                                    <input type="text" />
                                    <img src="${pageContext.request.contextPath}/images/billing/cal-icon.png" width="19" height="20" alt="Date Picker" /> </li>


                            </ul>
                            <ul>
                                <li><input type="button" class="button" value="Search">  <input type="button" class="button" value="Show All"></li></ul>
                        </div>

                    </div>


                    <div style="float:left;overflow:hidden;width:100%;border:1px solid #ccc;margin-top:10px" class="boxGradient">
                        <div class="cornerBlue">Search Results </div>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0"  class="dataTable">

                            <tr>
                                <th align="left" valign="middle">INV #</th>
                                <th align="left" valign="middle">INV DATE</th>
                                <th align="left" valign="middle">JOB DATE</th>
                                <th align="left" valign="middle">JOB #</th>
                                <th align="left" valign="middle">A/R</th>
                                <th align="left" valign="middle">ORIG</th>
                                <th align="left" valign="middle">REIMBURSED EXPENSES</th>
                                <th align="left" valign="middle">TOTAL DUE</th>
                                <th align="left" valign="middle">PAID</th>
                            </tr>
                            <tr>
                                <td><a href="${pageContext.request.contextPath}/billing-invoice-receivable.action">123</a></td>
                                <td>07/02/12</td>
                                <td>06/20/12</td>
                                <td><a href="#">010</a></td>
                                <td><a href="#">USL</a></td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td><label for="select"></label>
                                    <select name="select" id="select">
                                        <option selected="selected">ALL PAID</option>
                                        <option>ORIG PAID</option>
                                        <option>ORIG + 1 PAID</option>
                                        <option>CC PAID</option>
                                    </select></td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>

                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                            </tr>
                        </table>


                    </div>


                </div>


            </div>
        </div>
        <!--bodycontent end here-->
    </div>

    <div style="overflow:hidden" id="helpContainer">
        <div id="helpContent" class="helpContentContainer">
            <div style="text-align:right;padding:0px;margin:0px;margin-top:-5px;"><img src="${pageContext.request.contextPath}/images/billing/delete-icon.gif" width="16" height="16" alt="Close" id="close"/></div>
            <p>This is Contextual Help Section for DepoSolutions</p>
        </div>
        <div style="float:right;color:#FFF;"><a href="#" id="slidebutton"><img src="${pageContext.request.contextPath}/images/billing/helpicon.png"  alt="Help" width="36" height="94" border="0" /></a></div>
    </div>
